<template>
    <el-main>
        <el-row :gutter="15">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card shadow="never" class="welcome">
                    <el-avatar size="large" :src="image.avatar" />
                    <div class="tip-body">
                        <div class="tip-title">{{ getTipTitle() }}</div>
                        <div class="tip-desc">
                            <a target="_balnk" :href="config.GIT"> {{ config.APP_NAME }}</a>
                            使用了最新的Vue3、 Vite、Element-Plus、TypeScript、Pinia等主流技术开发。
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card shadow="never" class="vab-card">
                    <template #header>
                        <div class="vab-card-header">
                            <el-icon>
                                <el-icon-message />
                            </el-icon>
                            <div>框架依赖</div>
                        </div>
                        <el-tag type="success">当前版本：{{ config.APP_VER }}</el-tag>
                    </template>
                    <template #default>
                        <el-descriptions border :column="3">
                            <el-descriptions-item
                                :label="index"
                                v-for="(item, index) in packageJson.dependencies"
                                v-bind:key="index"
                            >
                                {{ item }}
                            </el-descriptions-item>
                            <el-descriptions-item
                                :label="index"
                                v-for="(item, index) in packageJson.devDependencies"
                                v-bind:key="index"
                            >
                                {{ item }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </template>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script setup lang="ts">
import packageJson from '../../../package.json'
import { useAuthStore } from '@/stores/modules/auth.ts'
import config from '@/config'
import image from '@/utils/image.ts'

const getTipTitle = () => {
    const now = new Date()
    const hour = now.getHours()

    if (hour >= 6 && hour < 12) {
        return '上午好，' + useAuthStore().userInfo.adminNickname + '。元气满满的早晨，加油哦。'
    } else if (hour >= 12 && hour < 18) {
        return '中午好，' + useAuthStore().userInfo.adminNickname + '。忙碌了一上午，记得吃午饭哦。'
    } else {
        return '晚上好，' + useAuthStore().userInfo.adminNickname + '。睡觉要有好梦。'
    }
}
</script>

<style scoped>
.welcome :deep(.el-card__body) {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--el-color-white)
        linear-gradient(120deg, var(--el-color-primary-light-9) 10%, var(--el-color-white))
        no-repeat;
}

.welcome .tip-body {
    margin-left: 20px;
}

.welcome .tip-body .tip-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
}

.welcome .tip-body .tip-desc {
    margin-top: 3px;
}

.welcome .tip-body .tip-desc a {
    color: var(--el-color-primary);
}

.vab-card :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.vab-card :deep(.el-card__header) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.vab-card .vab-card-header {
    display: flex;
    align-items: center;
}

.vab-card .vab-card-header .el-icon {
    margin-right: 5px;
    color: var(--el-color-primary);
}
</style>
